<template>
  <div class="myCollectDiv">
    <collect-item :collectItem="collectIndetail" @cancelCollect="cancelCollect" v-if="collectIndetail.length>0"></collect-item>
    <div v-else class="lackCollectPage">
      <div class="lackCollectTxt">
        <div><img src="/static/images/lack/lackCollect.png"></div>
        <p>暂无收藏记录~</p>
      </div>
    </div>
  </div>
</template>

<script>
  import collectItem from '@/components/mycollect/collect-item'
  export default {
    components:{
      collectItem
    },
    data(){
      return{
        collectIndetail: [],
      }
    },
    mounted() {
      this.cancelMyCollect()
    },
    methods:{
      cancelCollect(){
        this.$http.get('user/favorites').then((res)=>{ 
          res.data.data ? this.collectIndetail = res.data.data : this.collectIndetail = []
        })
        //this.wxAlert("取消成功")
      },
      cancelMyCollect(){
        this.$http.get('user/favorites').then((res)=>{ 
          res.data.data ? this.collectIndetail = res.data.data : this.collectIndetail = []
        })
        
      },
      wxAlert(txt){
        wx.showToast({
            title: txt,
            icon: "none",
            duration: 2000,
            mask: true
        })
      }
    }
  }
</script>

<style scoped>
.myCollectDiv{
  background: #efeff4;
  width: 100%;
  min-height: 100%;
  position: absolute;
  top: 0;
}
.myCollectDiv .noCollect{
  width: 100%;
  height: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  margin-top: 50%
}
.lackCollectPage{
  width: 100%;
  height: 100%;
  margin-top: 50%;
  display: flex;
  justify-content: center;
  align-items: center;
}
.lackCollectPage .lackCollectTxt div{
  width: 260rpx;
  height: 228rpx;
  margin: 0 auto;
}
.lackCollectPage .lackCollectTxt div img{
  width: 100%;
  height: 100%;  
}
.lackCollectPage .lackCollectTxt p{
  text-align: center;
  font-size: 30rpx;
  color: #adadad;
  margin-top: 25rpx;
}
</style>
